<template>
    <transition name="move">
        <div class="song-menu" v-show="showMenu" @click="hideMenu">
            <transition name="move_y">
                <div class="menu" v-show="showMenu">
                    <div class="header">
                        <p class="name" v-html="menuSong.name"></p>
                        <p class="singer" v-html="menuSong.singer"></p>
                    </div>
                    <div class="content">
                        <div class="item" @click="addNext">
                            <div class="icon">
                                <i class="iconfont icon-add-music"></i>
                            </div>
                            <p class="text">下一首播放</p>
                        </div>
                        <div class="item" @click.stop="favorite">
                            <div class="icon">
                                <i class="iconfont" :class="favoriteCls"></i>
                            </div>
                            <p class="text">{{favoriteMsg}}</p>
                        </div>
                    </div>
                    <div class="bottom">
                        <p class="btn">取消</p>
                    </div>
                </div>
            </transition>
        </div>
    </transition>
</template>

<script type="text/ecmascript-6">
    import { mapGetters, mapMutations, mapActions } from 'vuex'

    export default {
        name: 'song-menu',
        data() {
            return {
                isFavorite: false
            }
        },
        computed: {
            showMenu() {
                return this.menuSong.id
            },
            favoriteCls() {
                return this.isFavorite ? 'icon-full-heart' : 'icon-heart'
            },
            favoriteMsg() {
                return this.isFavorite ? '已收藏' : '添加收藏'
            },
            ...mapGetters([
                'menuSong',
                'favoriteList'
            ])
        },
        methods: {
            hideMenu() {
                this.setMenuSong({})
            },
            addNext() {
                this.addNextSong(this.menuSong)
            },
            favorite() {
                this.isFavorite = !this.isFavorite
                this.setFavorite({
                    song: this.menuSong,
                    isFavorite: this.isFavorite
                })

                setTimeout(() => {
                    this.hideMenu()
                }, 200)
            },
            ...mapMutations({
                setMenuSong: 'SET_MENU_SONG',
                setSinger: 'SET_SINGER'
            }),
            ...mapActions([
                'addNextSong',
                'setFavorite'
            ])
        },
        watch: {
            menuSong(newSong) {
                const index = this.favoriteList.findIndex((item) => {
                    return newSong.id === item.id
                })
                this.isFavorite = index > -1
            }
        }
    }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
    @import "~common/stylus/variable"
    @import "~common/stylus/mixin"

    .move-enter-active, .move-leave-active
        transition: all .5s
    .move-enter, .move-leave-to
        opacity: 0

    .move_y-enter-active, .move_y-leave-active
        transition: all .3s
    .move_y-enter, .move_y-leave-to
        transform: translateY(100%)

    .song-menu
        position: fixed
        top: 0
        bottom: 0
        left: 0
        right: 0
        z-index: 400
        mask()
        .menu
            display: flex
            flex-flow: column
            position: fixed
            bottom: 0
            left: 0
            right: 0
            height: 210px
            padding: 0 20px
            background: $color-background
            z-index: 401
            .header
                padding: 15px 0
                font-size: $font-size-medium-x
                .singer
                    margin-top: 5px
                    font-size: $font-size-medium
                    color: $color-text-d
            .content
                flex: 1
                padding: 15px 0
                height: 100%
                .item
                    display: inline-block
                    width: 70px
                    padding: 0 10px 10px 0
                    text-align: center
                    .icon
                        font-size: 25px
                        .icon-full-heart
                            color: #ff7777
                    .text
                        margin-top: 20px
                        font-size: $font-size-small-x
            .bottom
                height: 45px
                width: 100%
                text-align: center
                border-top: 1px solid #f7f7f7
                .btn
                    line-height: 45px
</style>
